<template>
	<view class="content">
		<!-- 第一部分列表 -->
		<view class="admin">
			<view class="background">
				<view class="adminList" v-for="item in adminList">
					<!-- 左图 -->
					<view class="leftImg">
						<u-avatar :src="src" :size="size"></u-avatar>
					</view>
					<!-- 中间部分的账号信息 -->
					<view class="centerMsg">
						<view class="Msgcell">
							<view class="left_span">
								账号:
							</view>
							<view class="right_msg">
								1234566789
							</view>
						</view>
						<view class="Msgcell">
							<view class="left_span">
								密码:
							</view>
							<view class="right_msg">
								*******
							</view>
						</view>
						<view class="Msgcell">
							<view class="left_span">
								角色:
							</view>
							<view class="right_msg">
								库管
							</view>
						</view>
					</view>
					<!-- 右方权限 -->
					<view class="rightAdmin">
						<view class="btnWidht btnSpan btn_color">
							重置密码
						</view>
						<view class="btnWidht btnSpan btn_color">
							修改
						</view>
						<view class="btnWidht btnSpan delcolor">
							删除
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 第二部分添加管理员 -->
		<u-button class="buton" @click="toAddadmin">添加管理员</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				size: 120,
				adminList:[{},{},{}]
				
			}
		},
		methods:{
			toAddadmin:function(){
				uni.navigateTo({
					url:'./addAdministr'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 1235rpx;
		background-color: #F7F7F7;
	}

	.admin {
		width: 750rpx;

		.background {
			background: #FFFFFF;
		}

		.adminList {
			width: 700rpx;
			height: 232rpx;
			margin: 16rpx auto;
			display: flex;
			justify-content: space-between;

			// 图
			.leftImg {
				margin: 56rpx 0;
			}

			// 中
			.centerMsg {
				height: 232rpx;
				width: 420rpx;
				text-align: left;
				line-height: 70rpx;
			}

			.Msgcell {
				display: flex;

				.left_span {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					margin-right: 32rpx;
				}

				.right_msg {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			// 右
			.rightAdmin {
				text-align: center;
				height: 232rpx;

				.btnWidht {
					width: 120rpx;
					height: 48rpx;
					background: #D8EFFF;
					border-radius: 8rpx;
					line-height: 48rpx;
					margin-top: 20rpx;
				}

				.btnSpan {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
				}

				.btn_color {
					color: #0199FE;
				}

				.delcolor {

					background: #FFE8E5;

					color: #FA5846;
				}
			}
		}
	}

	.buton {
		width: 670rpx;
		height: 80rpx;
		background: #0199FE;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		position: fixed;
		bottom: 24rpx;
		left: 40rpx;
	}
</style>
